<template>
  <div>
    子组件
    <button @click="propsInfoClick">propsInfo:{{ propsInfo }}</button>
    <hr />
  </div>
</template>

<script setup>
import {
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

const props = defineProps({
  info: {
    type: Object,
    default() {
      return {};
    },
  },
});
const emit = defineEmits(["update:info"]);
const propsInfo = computed({
  get() {
    return props.info;
  },
  set(value) {
    console.log(value);
    emit("update:info", value);
  },
});
const propsInfoClick = () => {
  propsInfo.value = {
    age: 2,
    msg: {
      count: 100,
    },
  };
};
console.log("子组件setup函数内部");
onBeforeMount(() => {
  console.log("子组件onBeforeMount");
});
onMounted(() => {
  console.log("子组件onMounted");
});
onBeforeUpdate(() => {
  console.log("子组件onBeforeUpdate");
});
onUpdated(() => {
  console.log("子组件onUpdated");
});
onBeforeUnmount(() => {
  console.log("子组件onBeforeUnmount");
});
onUnmounted(() => {
  console.log("子组件onUnmounted");
});
</script>
<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
